<html>
  <head>
    <title>Indented Tree</title>
    <link rel="stylesheet" type="text/css" href="ex.css"/>
    <script type="text/javascript" src="../protovis-d3.2.js"></script>
    <script type="text/javascript" src="data.js"></script>	
  </head>
  <body>
    <script type="text/javascript+protovis">

var root = pv.dom(flare)
    .root("flare")
    .sort(function(a, b) pv.naturalOrder(a.nodeName, b.nodeName));

/* Recursively compute the package sizes.
root.visitAfter(function(n) {
  if (n.firstChild) {
    n.nodeValue = pv.sum(n.childNodes, function(n) n.nodeValue);
  }
});*/

var vis = new pv.Panel()
    .width(260)
    .height(function() (root.nodes().length + 1) * 12)
    .margin(5);

var layout = vis.add(pv.Layout.Indent)
    .nodes(function() root.nodes())
    .depth(12)
    .breadth(12);

layout.link.add(pv.Line);

var node = layout.node.add(pv.Panel)
    .top(function(n) n.y - 6)
    .height(12)
    .right(6)
    .strokeStyle(null)
    .events("all")
    .event("mousedown", toggle);

node.anchor("left").add(pv.Dot)
    .strokeStyle("#1f77b4")
    .fillStyle(function(n) n.toggled ? "#1f77b4" : n.firstChild ? "#aec7e8" : "#ff7f0e")
    .title(function t(d) d["name"] +": "+d["comment"])
  .anchor("right").add(pv.Label) ;

node.anchor("left").add(pv.Label)
    .textStyle(function(n) n.firstChild || n.toggled ? "#aaa" : "#000")
    .text(function(n) n["name"] +": "+n["comment"]);

vis.render();

/* Toggles the selected node, then updates the layout. */
function toggle(n) {
  n.toggle(pv.event.altKey);
  return layout.reset().root;
}

    </script>
  </body>
</html>



